<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
          <h3>宠物信息</h3>
      </div>

      <el-descriptions class="margin-top" title="" :column="1" size="" border>
          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              宠物类型
          </template>
            <el-tag type="" style="background-color: #e54d42; color: white;" v-if="petInfo.type == 1">狗</el-tag>
            <el-tag type="" style="background-color: #f37b1d; color: white;" v-if="petInfo.type == 2">猫</el-tag>
            <el-tag type="" style="background-color: #f37b1d; color: white;" v-if="petInfo.type == 3">其他</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              宠物品种
          </template>
          {{ petInfo.variety }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              雌雄
          </template>
          {{ petInfo.gender }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              宠物名称
          </template>
          {{ petInfo.name }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              宠物毛色
          </template>
          {{ petInfo.color }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              是否登记
          </template>
            <el-tag type="warning" v-if="petInfo.isCheckIn == 1">未登记</el-tag>
            <el-tag type="success" v-if="petInfo.isCheckIn == 2">已登记</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              是否注销
          </template>
            <el-tag type="warning" v-if="petInfo.isLogOut == 1">未注销</el-tag>
            <el-tag type="success" v-if="petInfo.isLogOut == 2">已注销</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              登记时间
          </template>
          {{ petInfo.createTime }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-user"></i>
              绑定主人
          </template>
          {{ petInfo.master }}
          </el-descriptions-item>

          <el-descriptions-item>
          <template slot="label">
              <i class="el-icon-location-outline"></i>
              宠物图片
          </template>
          <el-image 
            v-show="urls.length > 0" 
            style="width: 500px; height: 300px"
            v-for="(url, index) in urls"
            :key="index" 
            :src="url" 
            :preview-src-list="urls"
            fit="contain">
        </el-image>
          <!-- <el-avatar shape="square" style="width: 100px;height: 100px;" :src=" ownerinfo.face!=null?ownerinfo.face:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' "></el-avatar> -->
          </el-descriptions-item>
          
      </el-descriptions>
      </el-card>
</template>

<script>
export default {
name:'petInfo',
data(){
  return{
      petId:'',
      petInfo:{},
      urls:[]
  }
},
mounted() {
  // 获取查询参数
  const ID = this.$route.query.ID;
  this.petId = ID
  console.log('petId:', ID);
  this.init()
},
activated(){
  const ID = this.$route.query.ID;
  this.petId = ID
  console.log('petId:', ID);
  this.init()
},
methods:{
  init(){
      this.$request.get("/pet/petByid",{
          params:{
            id:this.petId
          }
      }).then(res=>{
          this.petInfo = res.data
          let str = res.data.images
          if(str == null || str == ''){
            return;
          }
          str = str.replace("[", "").replace("]", "")
          console.log(str)
          let arr = str.split(',');
          this.urls = arr
          console.log(this.urls)
      }).catch(err=>{
          console.error(err)
      })
  }
}
}
</script>

<style>

</style>